<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="font/iconfont.css">
    <link rel="stylesheet" href="css/shoppingCart.css">



    <!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.css">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/bootstrap-reboot.min.css">
    <link rel="stylesheet" href="css/bootstrap-grid.min.css"> -->
    <!-- <script src="js/bootstrap.min.js"></script> -->
    <title>shoppingCart购物车</title>


</head>
<body>
    <!-- 顶部提醒 -->
    <div class="caution">
    </div>
   
    <!-- 登录注册 -->
    <div class="topBar">
    </div>
    <!-- logo行 -->
    <div class="searchBar">
        <div class="searchBarFixed">
            <div class="w1200 searchBarFixedBox">
                <!-- logo -->
                <div class="logo">
                    <a href="#">
                        <img src="img/logo.png" alt="">
                    </a>
                </div>
                <div class="searchBarFixedBox-right">
                    <span class="searchBarFixedBox-right-s1">正版好书</span><span class="searchBarFixedBox-right-s2">全场满69包邮</span><span class="searchBarFixedBox-right-s3">特价书一折起</span>
                </div>
               
            </div>
        </div>
    </div>
    <div class="fenggehang"></div>



    <!-- 购物车 -->
    <div class="boxd">
        <div class="boxx">

          
            <div class="asdfg-top">
                <div class="asdfg-top-d1"><a href="./list.html">商品列表</a></div>
                <div class="asdfg-top-d2">图书名称</div>
                <div class="asdfg-top-d3">定价(元)</div>
                <div class="asdfg-top-d4">现价(元)</div>
                <div class="asdfg-top-d5">数量操作</div>
                <div class="asdfg-top-d6" >小计(元)</div>
                <div class="asdfg-top-d7 del">操作</div>
            </div>

   
            <div class="asdfg">
                <!-- <div class="asdfg-box">
                    <div class="asdfg-box-d1"><input type="checkbox"></div>
                    <div class="asdfg-box-d2"><img src="http://image12.bookschina.com/2018/20180310/s7867941.jpg" alt=""><span>怪谈:神坐山物语
                    </span></div>
                    <div class="asdfg-box-d3">￥42</div>
                    <div class="asdfg-box-d4">￥16</div>
                    <div class="asdfg-box-d5"><input class="setNum" type="number" value=""></div>
                    <div class="asdfg-box-d6" style="color: red;">￥16.0</div>
                    <div class="asdfg-box-d7 del">删除</div>
                </div>
            </div>  -->
        </div> 

        <div class="asdfg-bottom">
            <div class="asdfg-bottom-d1" ><input type="checkbox" id="asdfg-bottom-d1-ipt" checked=""><label for="asdfg-bottom-d1-ipt">全选</label></div>
            <div class="asdfg-bottom-d2" >数量：<span class="asdfg-bottom-d2-s">00</span></div>
            <div class="asdfg-bottom-d3">总价：<span class="asdfg-bottom-d3-s">00</span></div>
            <div class="asdfg-bottom-d4 allDel">删除选中</div>
        </div>


    </div>

  
    <!-- --------底部-------- -->
    <div class="bottom-box">
    </div>

</body>
<!-- <script src="./js/ajax.js"></script> -->
<script src="./libs/jquery.js"></script>
<script>

    // 顶部提醒
    $(".caution").load("http://localhost:3000/public/public_index.html .cautionioc")


    // 开始动画
    $(".imgTop").load("http://localhost:3000/public/public_index.html .imgTop-box",function(){
        setTimeout(function(){
            console.log("这是三秒以后");
            $(".imgTop-box").animate({
                height : 100,
            }, 1000);
            $(".i1").animate({
                opacity: 'show'
            }, 1000);
            $(".i2").animate({
                height : 100, opacity: 'hide'
            }, 1000);
        },3000)
    })

    // 登录注册
    $(".topBar").load("http://localhost:3000/public/public_index.html .zhuce",function(){
        const zhanghu = document.getElementById("zhanghu");
        const zhul = document.querySelector(".zhul");
        zhanghu.onmouseenter = function(){
            console.log("yiru");
            zhul.style.display = "block";
            zhanghu.style.background = "#fff"
            zhanghu.style.border = "1px solid black"
            zhanghu.style.borderBottom = "none"
            zhanghu.style.borderTop = "none"
        }
        zhanghu.onmouseleave = function(){
            console.log("yichu");
            zhul.style.display = "none";
            zhanghu.style.background = "#f2f2f2"
            zhanghu.style.border = "none"
        }
        zhul.onmouseenter = function(){
            console.log("yiru");
            zhul.style.display = "block";
            zhanghu.style.background = "#fff"
            zhanghu.style.border = "1px solid black"
            zhanghu.style.borderBottom = "none"
            zhanghu.style.borderTop = "none"
        }
        zhul.onmouseleave = function(){
            console.log("yichu");
            zhul.style.display = "none";
            zhanghu.style.background = "#f2f2f2"
            zhanghu.style.border = "none"
        }

        //-------以下为登录注册行新加js

        if(localStorage.getItem("token") === "ok"){
            $(".loginArea").hide();
            $(".loginArea1").show().children("span").html(localStorage.getItem("uname"))
        }else{
            $(".loginArea1").hide();
            $(".loginArea").show();
        }

        $(".loginArea1-s2").click(function(){
            $(".loginArea1").hide();
            $(".loginArea").show();
            localStorage.setItem("token","no")
        })

        $(".zhanghu").click(function(){
            if(localStorage.getItem("token") === "ok"){
                $(".loginArea").hide();
                $(".loginArea1").show().children("span").html(localStorage.getItem("uname"))
            }else{
                if(confirm("您还未登录，是否前往登录？")){
                    location.href="./logon.html"
                }
                return false;
            }
        })


    })

    // logo行
    $(".searchBar").load("http://localhost:3000/public/public_index.html .searchBarFixed",function(){
        const otxt = document.getElementById("search");
        const obtn = document.querySelector(".s4");
        const oul = document.querySelector(".list");

        // 点击按钮，跳转到真实的百度搜索
        obtn.onclick = function(){
            location.href = "https://www.baidu.com/s?wd=" + otxt.value;
        }

        otxt.oninput = function(){
            
            // 判断输入框是否为空，为空，清除下拉菜单
            if(this.value === "") oul.innerHTML = "";
            oul.style.display = "block"
            // console.log(this.value)
            // 开启jsonp请求，请求百度数据
            jsonp("https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su",function  (res){
                // 请求成功后，处理数据
                // console.log(res.s);
                let str = "";
                // 拼接页面结构
                for(let i=0;i<res.s.length;i++){
                    str += `<li>${res.s[i]}</li>`
                }
                // 渲染页面
                // console.log(str)
                oul.innerHTML = str;
            
            
                oul.onmouseover = function(eve){
                    const e = eve?eve:window.event;
                    const tag = e.target || ev.srcElement;
                    // console.log(tag.nodeName);
                    if(tag.nodeName == "LI"){
                        tag.style.color = "red";
                        // console.log(tag.innerHTML);
                        tag.onclick = function(){
                            otxt.value = tag.innerHTML;
                            oul.style.display="none";
                        }
                    }
                }
                oul.onmouseout = function(eve){
                    const e = eve?eve:window.event;
                    const tag = e.target || ev.srcElement;
                    // console.log(tag.nodeName);
                    if(tag.nodeName == "LI"){
                        tag.style.color = "black";
                    }
                }
            },{
                wd:this.value,
                cb:"ajshdfgausdf",
                selfName:"cb"
            })
        }
        function jsonp(url,cb,data){
            let str = "";
            for(let i in data){
                str += `${i}=${data[i]}&`
            }
            url += "?" + str + "_qft_=" + Date.now();
            const script = document.createElement("script");
            script.src = url;
            document.body.appendChild(script);
            window[data[data.selfName]] = function(res){
            cb(res);
        }
        }
    })
        
    //导航栏
    $(".nav").load("http://localhost:3000/public/public_index.html .nav1")

    //底部
    $(".bottom-box").load("http://localhost:3000/public/public_index.html .bottom")


</script>

<script src="./libs/require.js" data-main="./js/shoppingCart.js"></script>


<!-- 
<script> 
    class Cart{
        constructor(){
            this.tbody = document.querySelector(".asdfg");
            this.atbody = document.querySelectorAll(".asdfg");
            this.url = "http://localhost:3000/data/goods.json";
            this.boxd = document.querySelector(".boxd");

            const thatt = this;

            console.log("cibstryctor");
            // 1. 开启ajax请求
            this.load();

            // 7. 绑定事件
            this.addEvent();
        }
        addEvent(){
            const that = this;
            this.tbody.addEventListener("input",function(eve){
                const e = eve || window.event;
                const tar = e.target || e.srcElement;
                // 8. 找到数量输入框
                if(tar.className === "setNum"){
                    // 获取id
                    that.id = tar.parentNode.parentNode.getAttribute("index")
                    // 获取数量
                    that.num = tar.value-0;
                    // 9. 从cookie的总数据中，查找要操作的数据的索引
                    that.setCookie(function(i){
                        // 修改查找到数据的数量
                        that.goodsMsg[i].num = that.num;
                    });
                }
            })
            
            this.tbody.addEventListener("click",function(eve){
                const e = eve || window.event;
                const tar = e.target || e.srcElement;
                // console.log("click");
                // 10. 点击时找到删除按钮
                // console.log(tar.className);
                if(tar.className === "del"){
                    // console.log("click del");
                    // 获取id
                    that.id = tar.parentNode.parentNode.getAttribute("index");
                    // console.log(that.id);
                    // console.log(that.id);
                    // 删除DOM
                    tar.parentNode.remove();
                    // 11. 从cookie的总数据中，查找要操作的数据的索引
                    that.setCookie(function(i){
                        // 从数组中删除查找到的数据
                        that.goodsMsg.splice(i, 1);
                    });
                }
            })
        }
        setCookie(cb){
            // 先从原有数据中，找到当前要操作的数据
            let i=0;
            this.goodsMsg.some((val,idx)=>{
                i = idx;
                return val.id === this.id
            })
            // 找到当前要操作的数据之后，执行外部传入的修改操作
            cb(i);
            // 将数据，存回本地存储，覆盖原数据
            localStorage.setItem("goodsMsg",JSON.stringify(this.goodsMsg))
        }
        load(){
            ajax({
                url:this.url,
                success:(res)=>{
                    // 2. 解析数据
                    this.res = JSON.parse(res).msg;
                    console.log(this.res);
                    // 3. 获取本地存储数据
                    this.getCookie();
                }
            })
        }
        getCookie(){
            // 4. 解析本地存储数据
            this.goodsMsg = localStorage.getItem("goodsMsg") ? JSON.parse(localStorage.getItem("goodsMsg")) : [];
            // console.log(this.goodsMsg);
            // 5. 准备渲染页面
            this.render();
        }
        render(){
            let str = "";
            let s = 0;
            // 读取商品总数据
            for(let i=0;i<this.res.length;i++){
                // 读取本地存储数据
                for(let j=0;j<this.goodsMsg.length;j++){
                    // 根据本地存储数据，比对商品总数据，获取到真正要渲染的数据
                    if(this.res[i].proId === this.goodsMsg[j].id){
                        // console.log(this.res[i], this.goodsMsg[j].num);
                        // 拼接页面结构
                        s++;
                        if(this.goodsMsg[j].num>=1){
                            str += `
                                        <div class="asdfg-box" index="${this.res[i].proId}">
                                    <div class="asdfg-box-d1"><input type="checkbox"  class="asdfg-box-d1-i" ${this.goodsMsg[j].check ? "checked" : ""}></div>
                                    <div class="asdfg-box-d2"><img src="${this.res[i].urlImg}" alt=""><span>${this.res[i].bookName}
                                    </span></div>
                                    <div class="asdfg-box-d3">￥${this.res[i].oPrice}</div>
                                    <div class="asdfg-box-d4">￥<span class="asdfg-box-d4-s">${this.res[i].cPrice}</span></div>
                                    <div class="asdfg-box-d5"><input class="setNum" type="number" value="${this.goodsMsg[j].num}" min="1" max="99"></div>
                                    <div class="asdfg-box-d6" style="color: red;">￥<span class="asdfg-box-d6-s">${(this.goodsMsg[j].num*this.res[i].cPrice).toFixed(1)}</span></div>
                                    <div class="del">删除</div>
                                </div>
                            </div> `;
                        }else{
                            str += ``;
                        }
                    }
                }
            }
            // 6. 填充到页面
            this.boxd.style.height = s*112+130 +  "px";
            this.tbody.innerHTML = str;
            // console.log(s);
            // console.log(this.atbody);

            let that = this;
            let goodsMsg = this.goodsMsg;
            let res = this.res

          
            //修改复选框
            $(".asdfg").on("change",".asdfg-box-d1-i",function(){
                //拿到checkbox的状态
                // console.log(this.checked)
                //拿到当前数据的id
                // console.log($(this).parent().parent().attr("index"))
                const id = $(this).parent().parent().attr("index");
                const c = this.checked;

                // let i = 0;
                // goodsMsg.some((val,idx)=>{
                //     i = idx;
                //     return val.id === $(this).parent().parent().attr("index");
                // })
                // goodsMsg[i].check = this.checked
                // localStorage.setItem("goodsMsg",JSON.stringify(goodsMsg))

                //选中
                updateLocal(goodsMsg,id,function(i){
                    goodsMsg[i].check = c
                })
                $("#asdfg-bottom-d1-ipt")[0].checked = goodsMsg.every(val=>val.check)


                //改变总数量
                getGoodsMsg(function(sunNum,i){
                    return sunNum += goodsMsg[i].num 
                },function(sunNum){
                    $(".asdfg-bottom-d2-s").html(sunNum)
                })
            
                //获取总价
                getGoodsMsg(function(sunNum,i){
                    let j = 0;
                    // //拿到当前图书的id
                    // console.log(res[j].proId);
                    res.some((val,idx)=>{
                        j = idx;
                        return val.proId == goodsMsg[i].id
                    })
                        // //通过当前图书的id拿到当前图书的价格
                        // console.log(res[j].cPrice)
                        //当前图书的数量 * 当前图书的价格
                    return sunNum += parseFloat(goodsMsg[i].num * res[j].cPrice)
                },function(sunNum){
                    $(".asdfg-bottom-d3-s").html(sunNum.toFixed(1))
                })



            })

            //判断全选是否被选中
            $("#asdfg-bottom-d1-ipt")[0].checked = goodsMsg.every(val=>val.check)
           

            //修改数量
            $(".asdfg").on("input",".setNum",function(){
                const id = $(this).parent().parent().attr("index");
                const n = this.value-0;
                // console.log(n)
                updateLocal(goodsMsg,id,function(i){
                    goodsMsg[i].num = n
                })

                let cP = $(this).parent().parent().find(".asdfg-box-d4-s").html() - 0;
                console.log(cP);
                // 
                // $(this).html(n*cP)
                console.log($(this).parent().parent().find(".asdfg-box-d6-s").html((n*cP).toFixed(1)));






                //改边总数量
                getGoodsMsg(function(sunNum,i){
                    return sunNum += goodsMsg[i].num 
                },function(sunNum){
                    $(".asdfg-bottom-d2-s").html(sunNum)
                })
            
                //获取总价
                getGoodsMsg(function(sunNum,i){
                    let j = 0;
                    // //拿到当前图书的id
                    // console.log(res[j].proId);
                    res.some((val,idx)=>{
                        j = idx;
                        return val.proId == goodsMsg[i].id
                    })
                    // //通过当前图书的id拿到当前图书的价格
                    // console.log(res[j].cPrice)
                    //当前图书的数量 * 当前图书的价格
                    return sunNum += parseFloat(goodsMsg[i].num * res[j].cPrice)
                },function(sunNum){
                    $(".asdfg-bottom-d3-s").html(sunNum.toFixed(1))
                })
            })

            //删除按钮
            $(".asdfg").on("click",".del",function(){
                const id = $(this).parent().attr("index");
                // $(this).parent().remove()
                // console.log(n)
                updateLocal(goodsMsg,id,function(i){
                    goodsMsg.splice(i,1)
                })


                getGoodsMsg(function(sunNum,i){
                return sunNum += goodsMsg[i].num 
            },function(sunNum){
                $(".asdfg-bottom-d2-s").html(sunNum)
            })
            
            //获取总价
            getGoodsMsg(function(sunNum,i){
                let j = 0;
                // //拿到当前图书的id
                // console.log(res[j].proId);
                res.some((val,idx)=>{
                    j = idx;
                    return val.proId == goodsMsg[i].id
                })
                // //通过当前图书的id拿到当前图书的价格
                // console.log(res[j].cPrice)
                //当前图书的数量 * 当前图书的价格
                return sunNum += parseFloat(goodsMsg[i].num * res[j].cPrice)
            },function(sunNum){
                $(".asdfg-bottom-d3-s").html(sunNum.toFixed(1))
            })
            })
            
            
            //修改localStorage的封装
            function updateLocal(goodsMsg,id,cb){
                let i = 0;
                goodsMsg.some((val,idx)=>{
                    i = idx;
                    return val.id ===id
                })
                cb(i)
                localStorage.setItem("goodsMsg",JSON.stringify(goodsMsg))
            }

            //修改全选按钮
            //选中全选，如果input发生变化时（change）
            $("#asdfg-bottom-d1-ipt").change(function(){
                //改变localStorage中check的的值
                //遍历localStorage，给localStorage的check改变为点击全选时，全选checkbox的checked值
                goodsMsg.forEach(val => {
                    val.check = this.checked;
                });
                //把改变过的数据保存到localStorage中
                localStorage.setItem("goodsMsg",JSON.stringify(goodsMsg))

                //改变页面上当前小checkbox的checked的值
                for(let i = 0;i<$(".asdfg-box-d1-i").length;i++){
                    $(".asdfg-box-d1-i")[i].checked = this.checked
                }



                //改变总数量
                getGoodsMsg(function(sunNum,i){
                    return sunNum += goodsMsg[i].num 
                },function(sunNum){
                    $(".asdfg-bottom-d2-s").html(sunNum)
                })
            
                //获取总价
                getGoodsMsg(function(sunNum,i){
                    let j = 0;
                    // //拿到当前图书的id
                    // console.log(res[j].proId);
                    res.some((val,idx)=>{
                        j = idx;
                        return val.proId == goodsMsg[i].id
                    })
                        // //通过当前图书的id拿到当前图书的价格
                        // console.log(res[j].cPrice)
                        //当前图书的数量 * 当前图书的价格
                    return sunNum += parseFloat(goodsMsg[i].num * res[j].cPrice)
                },function(sunNum){
                    $(".asdfg-bottom-d3-s").html(sunNum.toFixed(1))
                })
            })

            // let sunNum = 0;
            // for(let i = 0;i<$(".asdfg-box-d1-i").length;i++){
            //     if($(".asdfg-box-d1-i")[i].checked){
            //        sunNum += goodsMsg[i].num 
            //     }else{
            //         sunNum;
            //     }
            // }
            // $(".asdfg-bottom-d2-s").html(sunNum)

                //获取总数
            getGoodsMsg(function(sunNum,i){
                return sunNum += goodsMsg[i].num 
            },function(sunNum){
                $(".asdfg-bottom-d2-s").html(sunNum)
            })

            //获取总价
            getGoodsMsg(function(sunNum,i){
                let j = 0;
                // //拿到当前图书的id
                // console.log(res[j].proId);
                res.some((val,idx)=>{
                    j = idx;
                    return val.proId == goodsMsg[i].id
                })
                // //通过当前图书的id拿到当前图书的价格
                // console.log(res[j].cPrice)
                //当前图书的数量 * 当前图书的价格
                return sunNum += parseFloat(goodsMsg[i].num * res[j].cPrice)
            },function(sunNum){
                $(".asdfg-bottom-d3-s").html(sunNum.toFixed(1))
            })


            //点击“选中删除”
            $(".allDel").click(function(){
                var arr = goodsMsg.filter(val=>{
                    return !val.check;
                })
                localStorage.setItem("goodsMsg",JSON.stringify(arr))


                let goodsMsgg = JSON.parse(localStorage.getItem("goodsMsg")); 

            //      <div class="asdfg-bottom-d2" >数量：<span class="asdfg-bottom-d2-s">00</span></div>
            // <div class="asdfg-bottom-d3">总价：<span class="asdfg-bottom-d3-s">00</span></div>
            $(".asdfg-bottom-d2-s").html("0")
            $(".asdfg-bottom-d3-s").html("0")


            let str = "";
            let s = 0;
            // 读取商品总数据
            for(let i=0;i<res.length;i++){
                // 读取本地存储数据
                for(let j=0;j<goodsMsgg.length;j++){
                    
                    // 根据本地存储数据，比对商品总数据，获取到真正要渲染的数据
                    if(res[i].proId === goodsMsgg[j].id){
                        // console.log(this.res[i], this.goodsMsg[j].num);
                        // 拼接页面结构
                        s++;
                        if(goodsMsgg[j].num>=1){
                            str += `
                                        <div class="asdfg-box" index="${res[i].proId}">
                                    <div class="asdfg-box-d1"><input type="checkbox"  class="asdfg-box-d1-i" ${goodsMsgg[j].check ? "checked" : ""}></div>
                                    <div class="asdfg-box-d2"><img src="${res[i].urlImg}" alt=""><span>${res[i].bookName}
                                    </span></div>
                                    <div class="asdfg-box-d3">￥${res[i].oPrice}</div>
                                    <div class="asdfg-box-d4">￥${res[i].cPrice}</div>
                                    <div class="asdfg-box-d5"><input class="setNum" type="number" value="${goodsMsgg[j].num}" min="1" max="99"></div>
                                    <div class="asdfg-box-d6" style="color: red;">￥${(res[i].cPrice*goodsMsgg[j].num).toFixed(1)}</div>
                                    <div class="del">删除</div>
                                </div>
                            </div> `;
                        }else{
                            str += ``;
                        }
                    }
                }
            }
            // 6. 填充到页面
            that.boxd.style.height = s*112+130 +  "px";
            that.tbody.innerHTML = str;
            // console.log(s);
            // console.log(this.atbody);
            })
            // thatt.render();
            
            
            

            //封装获取localStorage中的值，然后输出到页面（DOM）
            function getGoodsMsg(cb,cd){
                let sunNum = 0;
                for(let i = 0;i<$(".asdfg-box-d1-i").length;i++){
                    if($(".asdfg-box-d1-i")[i].checked){
                    sunNum = cb(sunNum,i)
                    }else{
                        sunNum;
                    }
                }
                cd(sunNum)
            }
        }
        // allDel(){
        //     $(".allDel").click(function(){
        //         var arr = goodsMsg.filter(val=>{
        //             return !val.check;
        //         })
        //         localStorage.setItem("goodsMsg",JSON.stringify(arr))
        //         that.render();
        //     })
        // }
      
        
    }

    new Cart;
</script>  -->
</html> 